<template>
	<div class="add">
		<div class="i_index_title">
			<span class="index_title">购买记录</span>
			<van-icon class="fanhui" @click="fanhui" name="arrow-left" />
		</div>
		<div class="tab">
			<ul class="oul">
				<li v-for="(item,index) in date" @click="clic(index)" :style="{background:item.bgc,color:item.color}">
					{{item.name}}
				</li>
			</ul>
			<ul class="box">
				<li class="pic" v-show="indexClass==0">
					<div class="jiantou"></div>
					<van-list
					      v-model="loading"
					      :finished="finished"
					      :immediate-check="false"
					      finished-text="没有更多了"
					      @load="onLoad"
					      :offset="10"
					    >
					     <van-cell v-for="(item,index) in ss" :key="item.id">
									<div class="jix_title">
										<div class="title_name">第021006期开奖数据</div>
										<div class="title_time">{{item.createTime}}</div>
									</div>
									<div class="jix_ball">
									<div class="ball_left">
										<div class="qiuqiu" v-for="(ite,idx) in item.ticketCode.red"><span>{{ite}}</span></div>
										<div class="qiuqiu_lan" v-for="(ite,idx) in item.ticketCode.blue"><span>{{ite}}</span></div>
									</div>
								</div>
					  </van-cell>
					</van-list>
				</li>
				<li class="pic" v-show="indexClass==1">
					<div class="jiantou2"></div>
					<van-list
					      v-model="loading"
					      :finished="finished"
					      :immediate-check="false"
					      finished-text="没有更多了"
					      @load="onLoad"
					      :offset="10"
					    >
						<van-cell v-for="(item,index) in sd" :key="item.id">
							<div class="jix_title">
								<div class="title_name">第021006期开奖数据</div>
								<div class="title_time">{{item.createTime}}</div>
							</div>
							<div class="jix_ball">
								<div class="ball_left">
									<div class="qiuqiu" v-for="(ite,idx) in item.ticketCode.ballone"><span>{{ite}}</span></div>
									<div class="qiuqiu" v-for="(ite,idx) in item.ticketCode.balltwo"><span>{{ite}}</span></div>
									<div class="qiuqiu" v-for="(ite,idx) in item.ticketCode.ballthree"><span>{{ite}}</span></div>
								</div>
							</div>
						</van-cell>
					</van-list>
				</li>
				<li class="pic" v-show="indexClass==2">
					<div class="jiantou3"></div>
					<van-list
					      v-model="loading"
					      :finished="finished"
					      :immediate-check="false"
					      finished-text="没有更多了"
					      @load="onLoad"
					      :offset="10"
					    >
						<van-cell v-for="(item,index) in qc" :key="item.id">
							<div class="jix_title">
								<div class="title_name">第021006期开奖数据</div>
								<div class="title_time">{{item.createTime}}</div>
							</div>
							<div class="jix_ball">
								<div class="ball_left">
									<div class="qiuqiu" v-for="(ite,idx) in item.ticketCode.redball"><span>{{ite}}</span></div>
								</div>
							</div>
						</van-cell>
					</van-list>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
				loading: false,
				finished: false,
				page: 1,//请求第几页
				pageSize: 10,//每页请求的数量
				total: 0,//总共的数据条数
				num:1,
				indexClass:0,
				date:[
					{name:'双色球',bgc:'#FFA9A9',color:'white'},
					{name:'福彩3D',bgc:'#BCDFFF',color:'#1591ED'},
					{name:'七彩乐',bgc:'#E5D3FF',color:'#9A61F7'}
				],
				shuangse:[
					{name:'机选1注',check:false,},
					{name:'机选2注',check:false,}
				],
				sand:[
					{name:'机选1注',check:false,},
					{name:'机选2注',check:false,}
				],
				qicai:[
					{name:'机选1注',check:false,},
					{name:'机选2注',check:false,}
				],
				ss:[],
				sd:[],
				qc:[]
	    };
	  },
		mounted() {
				this.buysslist()
				this.buysdlist()
				this.buyqclist()
		},
		methods:{
			clic(index){
				this.page=1
				this.pageSize=10
				this.indexClass = index;
				if(this.indexClass==0){
					this.buysslist()
				}else if(this.indexClass==1){
					this.buysdlist()
				}else if(this.indexClass==2){
					this.buyqclist()
				}
			},
			fanhui(){
				this.$router.go(-1);
			},
			onLoad() {
			  this.page++;
				if(this.indexClass==0){
					this.buysslist()
				}
				if(this.indexClass==1){
					this.buysdlist()
				}
				if(this.indexClass==2){
					this.buyqclist()
				}
			},
			buysslist(){
				this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/buyNote',{
					"orderBy": "0",
					  "pageNum": 1,
					  "pageSize": this.pageSize*this.page,
					  "ticketId": 2
				},{
					headers:{
					  token:window.sessionStorage.getItem('token')
					}
				}).then((res)=>{
					this.ss=res.data.data.rows
					this.ss.forEach((item)=>{
						item.ticketCode=JSON.parse(item.ticketCode)
					})
					if(this.indexClass==0){
						this.total=res.data.data.total
					}
					this.loading = false;
					console.log(this.ss)
				})
			},
			buysdlist(){
				this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/buyNote',{
					"orderBy": "0",
					  "pageNum": 1,
					  "pageSize": this.pageSize*this.page,
					  "ticketId": 4
				},{
					headers:{
					  token:window.sessionStorage.getItem('token')
					}
				}).then((res)=>{
					console.log(res)
					this.sd=res.data.data.rows
					this.sd.forEach((item)=>{
						item.ticketCode=JSON.parse(item.ticketCode)
					})
					if(this.indexClass==1){
						this.total=res.data.data.total
					}
					this.loading = false;
				})
			},
			buyqclist(){
				this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/buyNote',{
					"orderBy": "0",
					  "pageNum": 1,
					  "pageSize": this.pageSize*this.page,
					  "ticketId": 3
				},{
					headers:{
					  token:window.sessionStorage.getItem('token')
					}
				}).then((res)=>{
					this.qc=res.data.data.rows
					this.qc.forEach((item)=>{
						item.ticketCode=JSON.parse(item.ticketCode)
					})
					if(this.indexClass==2){
						this.total=res.data.data.total
					}
					this.loading = false;
					console.log(res)
				})
			}
		}
	};
</script>

<style scoped>
	*{margin: 0; padding: 0;}
	.i_index_title{
		width: 100%;
		height: 50px;
		background-color: #F74A4B;
	}
	.tab{
		width: 95%;
		height: 450px;
		/* border: 1px solid red; */
		margin: 20px auto 0 ;
	}
	.oul{
		display: flex;
		height: 30px;
		margin: 0 auto;
	}
	.oul>li{
		margin-top: 0;
		height: 30px;
		flex: 1;
		text-align: center;
		line-height: 30px;
		border-radius: 30px;
		margin: 0 5px 0 5px;
	}
	.aa{
		display: none;
	}
	.pic{
		width: 100%;
		min-height: 100px;
		margin-top: 20px;
		display: block;
		background: white;
		border: 1px solid white;
		position: relative;
	}
	.fanhui{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		color: white;
		font-size: 30px;
	}
	.index_title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.huakuai{
		width: 100%;
		height: 50px;
		background: white;
		position: fixed;
		display: flex;
		bottom: 0;
	}
	.multiple{
		flex: 1;
		margin-left: 20px;
		/* border: 1px solid red; */
	}
	.multiple>p{
		font-size: 20px;
	}
	.multiple>span{
		font-size: 10px;
		border: 1px solid black;
	}
	.quantity{
		flex: 3;
		/* border: 1px solid red; */
		font-size: 20px;
		line-height: 50px;
	}
	.quantity>span{
		font-size: 25px;
	}
	.notarize{
		width: 70px;
		height: 30px;
		margin-top: 10px;
		margin-right: 20px;
		background-color: red;
		color: white;
		border-radius: 50px;
		text-align: center;
		line-height: 30px;
	}
	.content_title{
		height: 50px;
		/* border: 1px solid red; */
	}
	.content_oul{
		max-height: 300px;
		/* border: 1px solid blue; */
		overflow: hidden;
		overflow: scroll;
	}
	.content_oul>li{
		height: 50px;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
	}
	.content_oli_ball{
		width: 30px;
		height: 30px;
		background-color: red;
		border-radius: 50%;
		color: white;
		text-align: center;
		line-height: 30px;
		margin-top: 10px;
		margin-left: 10px;
	}
	.box_jix{
		width: 93%;
		margin: 10px auto;
		position: relative;
	}
	.box_jix_check{
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translate(0,-50%);
	}
	.box_jix_p{
		position: absolute;
		top: 50%;
		left: 20px;
		transform: translate(0,-50%);
	}
	.jix_pji{
		font-size: 20px;
	}
	.jix_psj{
		font-size: 10px;
		color: #999999;
	}
	.jix_title{
		width: 95%;
		height: 50px;
		margin: 0 auto;
		display: flex;
		line-height: 50px;
	}
	.title_name{
		flex: 1;
		font-size: 15px;
	}
	.title_time{
		flex: 1;
		font-size: 13px;
		color: #999999;
	}
	.jix_ball{
		width: 95%;
		height: 50px;
		margin: 0 auto;
		position: relative;
	}
	.ball_left{
		display: flex;
		padding-top: 10px;
	}
	.qiuqiu{
		margin-right: 5px;
		width: 30px;
		height: 30px;
		background-color: #F74A4B;
		border-radius: 50%;
		position: relative;
	}
	.qiuqiu_lan{
		margin-right: 5px;
		width: 30px;
		height: 30px;
		background-color: #5555ff;
		border-radius: 50%;
		position: relative;
	}
	.qiuqiu>span{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.qiuqiu_lan>span{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.jiantou{
		width: 50px;
		height: 50px;
		background-color: white;
		position: absolute;
		top: -5px;
		left: 30px;
		transform:rotate(45deg);
	}
	.jiantou2{
		width: 50px;
		height: 50px;
		background-color: white;
		position: absolute;
		top: -5px;
		left: 50%;
		margin-left: -20px;
		transform:rotate(45deg) ;
	}
	.jiantou3{
		width: 50px;
		height: 50px;
		background-color: white;
		position: absolute;
		top: -5px;
		right: 30px;
		transform:rotate(45deg);
	}
</style>
